<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				background-color: #F00;
				margin: 50px;
				width: 400px;
				height: 200px;

				-webkit-animation-name: x-spin;
				-webkit-animation-duration: 20s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
			}

			@-webkit-keyframes x-spin{
				0% {
					-webkit-transform: rotateX(0deg);
				}

				50% {
					-webkit-transform: rotateX(180deg);
					background-color: #00F;
				}

				100% {
					-webkit-transform: rotateX(360deg);
					background-color: #F00;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	<div><script language="javascript">

	</script></div></body>
</html>
